<template>
    <div class="compress-container">
        <article class="ivu-article">
            <h1>批量/图片压缩工具</h1>
            <Alert style="margin-top: 5px" show-icon>
                概述
                <Icon type="ios-bulb-outline" slot="icon"></Icon>
                <template slot="desc">
                    可以拖拽或者点击按钮选择文件进行压缩，压缩平台https://tinypng.com/
                    <ul>
                        <li style="font-size:12px;list-style-type:disc;margin-bottom:0">文件必须是 jpg 或 png 格式的图片</li>
                        <li style="font-size:12px;list-style-type:disc;margin-bottom:0">最多上传20张图片</li>
                        <li style="font-size:12px;list-style-type:disc;margin-bottom:0">每个文件大小不超过5M</li>
                    </ul>
                </template>
            </Alert>
            <Form :label-width="80">
                <FormItem label="显示按钮">
                    <i-switch v-model="switchMode">
                        <span slot="open"></span>
                        <span slot="close"></span>
                    </i-switch>
                </FormItem>
                <FormItem label="选择图片" required>
                    <Upload
                        multiple
                        action="//jsonplaceholder.typicode.com/posts/">
                        <Button icon="ios-cloud-upload-outline">选择文件</Button>
                    </Upload>
                </FormItem>
                <FormItem label="选择图片" required>
                    <Upload
                        multiple
                        type="drag"
                        :format="['.jpg', '.jpeg', '.png']"
                        :before-upload="dropFileHandle"
                        action="//jsonplaceholder.typicode.com/posts/">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>点击或拖拽文件到这儿</p>
                        </div>
                    </Upload>
                </FormItem>
                <FormItem label="上传列表">
                    <div class="demo-upload-list" v-for="item in uploadList">
                        <img :src="item.url">
                        <div class="demo-upload-list-cover">
                            <Icon type="ios-eye-outline" @click.native="viewHandle(item.name)"></Icon>
                            <Icon type="ios-trash-outline" @click.native="removeHandle(item.name)"></Icon>
                        </div>
                    </div>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="submitHandle">开始压缩</Button>
                    <Button @click="clearListHandle">清空列表</Button>
                </FormItem>
            </Form>
            <Divider v-if="results.length > 0" style="margin-top:40px">压缩结果</Divider>
            <Table v-if="results.length > 0" border :columns="columns" :data="results"></Table>
        </article>
        <Modal :styles="{background: 'rgba(0,0,0,.7)'}"
               v-model="openPreview"
               fullscreen
               footer-hide>
            <Preview v-if="openPreview" :items="urls"/>
        </Modal>
    </div>
</template>

<script>
    const fs = require('fs');
    const { ipcRenderer } = require('electron');
    import Preview from '../components/Preview';

    export default {
        name: 'compress',
        data() {
            return {
                switchMode: true,
                openPreview: false,
                uploadList: [],
                columns: [
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 140,
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    }
                                }, '复制'),
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    }
                                }, '上传')
                            ]);
                        }
                    }
                ],
                results: [
                    /*{
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }*/
                ],
                urls: []
            }
        },

        components: {
            Preview
        },

        methods: {
            dropFileHandle(e) {
                // TODO::去除重复
                if (this.uploadList.some(item => item.name === e.name)) {
                    return false;
                }

                let base = fs.readFileSync(e.path, {
                    encoding: 'base64'
                });
                this.uploadList.push({
                    name: e.name,
                    url: `data:image/jpeg;base64,${base}`,
                    nativePath: e.path
                });

                return false;
            },
            viewHandle(name) {
                this.openPreview = true;
                this.urls = this.uploadList.filter(item => item.name === name)
                    .reduce((acc, curr) => acc.concat(curr.url), []);
            },
            removeHandle(name) {
                this.$Message.info(`${name}已被移除`);
                this.uploadList = this.uploadList.filter(item => item.name !== name);
            },
            clearListHandle() {
                if (this.uploadList.length === 0) {
                    this.$Message.warning('压缩列表为空');
                } else {
                    this.$Message.info('压缩列表已清空');
                }
                this.uploadList = [];
            },
            submitHandle() {
                if (this.uploadList.length === 0) {
                    this.$Message.warning('压缩列表为空');
                    return false;
                }
                const loading = this.$Message.loading({
                    content: '压缩中...',
                    duration: 0
                });
                /**
                 * 采用IPC通讯
                 * render -> main -> 压缩 -> render
                 */
                ipcRenderer.send('onDropCompress', this.uploadList);
                ipcRenderer.on('onDropCompressFinish', (event, res) => {
                    loading();

                });
            }
        }
    };
</script>

<style lang="scss">
    .compress-container{
        width: 100%;
        box-sizing: border-box;
        padding: 20px 25px;
        overflow: hidden;

        form{
            box-sizing: border-box;
            padding: 30px 10px;
            margin: 15px 0;
            border: 1px solid #eee;
            border-radius: 6px;
            background: #fff;
        }

        .demo-upload-list{
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0,0,0,.2);
            margin-right: 4px;
        }
        .demo-upload-list img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .demo-upload-list-cover{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.6);
        }
        .demo-upload-list:hover .demo-upload-list-cover{
            display: block;
        }
        .demo-upload-list-cover i{
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
    }
</style>
